<template>
    <s-layout id="layout" :title="'出行人列表'" navbar="normal" leftIconColor="$uni-text-color" :autoBack="true" :bgColor="'#ffffff'" :tabbarshow='false' :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{paddingTop:(safeAreaInsets?.top + 44) + 'px'}">

                <up-index-list :indexList="indexList" :customNavHeight="88">
                    <template v-for="(item, index) in itemArr" :key="index">
                    <!-- #ifdef APP-NVUE -->
                    <up-index-anchor :text="indexList[index]"></up-index-anchor>
                    <!-- #endif -->
                    <up-index-item>
                        <!-- #ifndef APP-NVUE -->
                        <up-index-anchor :text="indexList[index]"></up-index-anchor>
                        <!-- #endif -->
                        <view class="list" v-for="(item1, index1) in item" :key="index1">
                            <view class="list__item" @tap="moreSelect(item1.id,item1.nickname)">
                                <!-- 选择盒子 -->
                                <view class="icon_check">
                                    <image v-show="isSelected(item1.id)" :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"  mode="scaleToFill"/>
                                    <image v-show="!isSelected(item1.id)" :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"  mode="scaleToFill"/>
                                </view>
                                <!-- 头像盒子 -->
                                <view class="head_image">
                                    <up-avatar :size="52" :src="`${baseUrl}${item1.avatar}`"></up-avatar>
                                </view>
                                <!-- 信息盒子 -->
                                <view class="message_box">
                                    <view class="name">{{ item1.nickname }}</view>
                                    <view class="post">{{ item1.group.name }}</view>
                                </view>
                                <!-- <image class="list__item__avatar" :src="item1.url"></image>
                                <text class="list__item__user-name">{{item1.name}}</text> -->
                            </view>
                            <up-line></up-line>
                        </view>
                    </up-index-item>
                    </template>
                    <!-- 占位盒子 -->
                    <view class="Vacant_box"></view>
                </up-index-list>

        </view>
    </s-layout>

    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="confirm" :text="'确定'" />
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive,computed } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import Buttons from "@/components/s-button/s-button";
    import { baseUrl } from "@/sheep/config";
    const { safeAreaInsets } = uni.getSystemInfoSync()

    onLoad((option) => {
        let params =  {
            filter: JSON.stringify({
                is_entry:"1"
            }),
            op: JSON.stringify({
                is_entry:"="
            }),
            is_page:0
        }
        getEntryStaffAllList(params)
    })

    const indexList = ref([])
    const itemArr = ref([])

    // 封装获取员工列表接口
    const getEntryStaffAllList = async (params) => {
        const res = await sheep.$api.user.getEntryStaffAllAPI(params)
        itemArr.value = res.data.list
        indexList.value = res.data.indexlist
    }

    // 多选交互逻辑
    const selectedIds = ref([])
    const isSelected = (id) => {
        return selectedIds.value.map(item => item.id).includes(id);
    }
    const moreSelect = (id,nickname) =>  {
        const index = selectedIds.value.map(item => item.id).indexOf(id);
        if (index === -1) {
            selectedIds.value.push({
                id:id,
                nickname:nickname
            });
        } else {
            selectedIds.value.splice(index, 1);
        }
    }

    const confirm = () => {
        uni.navigateBack({
            delta:1,
            success:() => {
                uni.$emit('Employee',{
                    Employee_data:selectedIds.value
                })
            }
        })
    }


</script>

<style lang="scss" scoped>
    // 锚点样式
    :deep(.u-index-anchor) {
        background-color: #ffffff !important;
    }
    // 锚点文字样式
    :deep(.u-index-anchor__text) {
        color: #333;
        font-weight: $uni-font-weight;
    }
    // scroll-view 样式
    // :deep() {
    //     height: 80vh;
    // }

    .list__item {
        height: 142rpx;
        // width: 100%;
        background-color: #ffffff;
        display: flex;
    }
    // 头像盒子
    .head_image {
        margin-left: 30rpx;
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
        // .list__item__avatar {
        //     width: 100%;
        //     height: 100%;
        //     background-size: contain; /* 或 contain */
        // }
    }
    // 信息盒子
    .message_box {
        width: calc(100% - 262rpx);
        // width: 100%;
        margin-left: 30rpx;
        margin-right: 72rpx;
        height: 104rpx;
        // background-color: yellow;
    }

    // 名字
    .name {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
        margin-top: 8rpx;
        // text-align: left;
    }

    // 职位
    .post {
        font-family: PingFangSC;
        color: #666666;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        margin-top: 12rpx;
        // text-align: left;
    }

    // 组件样式
    .list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: $uni-bg-color;
	}

    // 最大盒子
    .container {
        width: 100%;
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        // padding: 0 20rpx;
        margin: 0 20rpx;
        // height: 90vh;
    }

    // 选择按钮
    .icon_check {
        margin-top: 10rpx;
        width: 36rpx;
        height: 36rpx;
        // margin: 0 30rpx;
        margin: 0 20rpx 0 0;
        image {
            width: 100%;
            height: 100%;
        }
    }

    // 占位空盒
    .Vacant_box {
        width: 100%;
        height: 144rpx;
    }

    .list {
		
		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;
			
			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 50%;
			}
			
			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}
		
		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
</style>



